<template>
  <div>
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      <el-container class="container_box">
        <div class="aside_box">
          <span>字典列表</span>
          <el-aside width="250px" class="physical_aside" style="background-color: #fff;padding: 10px">
            <div v-for="item in navList">
              <el-link
                  style="margin-bottom: 15px"
                  :type="navId===item.dictId ? 'success':''"
                  @click="handleNodeClick(item.dictId)"
              >{{ item.dictName }}
              </el-link>
            </div>
          </el-aside>
        </div>
        <el-main>
          <div>
            <el-form :inline="true" :model="addForm" class="demo-form-inline">
              <el-form-item label="编码">
                <el-input v-model="addForm.itemCode" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="addForm.itemName" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input v-model="addForm.sortOrder" placeholder=""></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="addDict">添 加</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="tableData" style="width:100%">
              <el-table-column prop="date" label="序号" width="80" type="index"></el-table-column>
              <el-table-column prop="itemCode" label="编码"></el-table-column>
              <el-table-column prop="itemName" label="名称"></el-table-column>
              <el-table-column width="200" fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button @click="toEditParam(scope.row)" type="primary" size="small">编辑
                  </el-button>
                  <el-button @click="removeParam(scope.row)" type="danger" size="small">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="1000px" class="top_dialog">
      <el-form :model="editForm" :rules="rules" ref="ruleForm">
        <el-form-item label="名称">
          <el-input v-model="editForm.itemName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="值">
          <el-input v-model="editForm.itemCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="editForm.sortOrder" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editParam('ruleForm')">保 存</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import crumbs from "../../views/Crumbs.vue";

export default {
  components: {
    crumbs,
  },
  data() {
    return {
      id: null,
      navId: 0,
      editForm: {},
      rules: {},
      navList: [],
      form: {},
      set: 1,
      dialogFormVisible: false,
      tableData: [],
      addForm: {},
      BreadCrumb: [{
        path: '',
        name: '基础管理'
      },
        {
          path: '/basic/datadictionary',
          name: '数据字典'
        }
      ],
      // 页码
      pageSize: 10,
      pageNo: 1,
      total: 0,
    }
  },
  created() {
    this.dictNavList()
  },
  methods: {
    dictNavList() {
      this.$axios.dictNavList().then(res => {
        if (res.code == '00000') {
          this.navList = res.data
          if (this.navList.length > 0) {
            this.navId = this.navList[0].dictId
            this.getDictsById()
          }
        }
      })
    },
    getDictsById() {
      this.$axios.getDictsById({
        dictId: this.navId,
      }).then(res => {
        if (res.code == '00000') {
          this.tableData = res.data
        }
      })
    },

    addDict() {
      this.id = null;
      this.$axios.insertDict({
        dictId: this.navId, ...this.addForm
      }).then(res => {
        if (res.code == '00000') {
          this.$message.success("提交成功")
          this.getDictsById()
        }
      })
    },
    handleNodeClick(id) {
      this.navId = id
      this.getDictsById()
    },
    toEditParam(row) {
      this.editForm = row
      this.id = row.dictItemId
      this.dialogFormVisible = true
    },
    editParam(formName) {
      this.$refs[formName].validate((valid) => {
        this.$axios.updateDict({
          dictId: this.navId,
          itemId: this.id,
          ...this.editForm,
        }).then(res => {
          if (res.code == '00000') {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.dialogFormVisible = false
            this.getDictsById()
          }
        })
      })
    },
    removeParam(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delDict({
          dictItemId: row.dictItemId
        }).then(res => {
          if (res.code == '00000') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getDictsById()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      this.getqueryPbHospitalList()
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      this.getqueryPbHospitalList()
    }
  }
}
</script>

<style scoped>
.main_box_title {
  background: #fff;
  padding: 10px;
}

.aside_box_title {
  margin: 0px 8px 10px;
  /* text-align: center; */
}

.header_top .el-divider--horizontal {
  margin-top: 0px;
}

.el-main {
  padding: 0px;
  padding-left: 20px;
}

.staff_form_btn {
  margin-left: 20px;
}

.physical_aside {
  height: 77%;
}

.box_list_box {
  flex: 1;
  margin-top: 20px;
}

.aside_box {
  padding-top: 30px;
}

.aside_box > span {
  line-height: 34px;
}
</style>
